<template>
	<view class="container">
		<view class="icon-box" v-if="model.isLock==1">
			<text class="icon iconfont icon-time"></text>
			<text class="tit">资料审核中，请等待结果</text>
		</view>
		<view class="icon-box" v-if="model.isLock==2">
			<text class="icon iconfont icon-close"></text>
			<text class="tit">审核不通过，请修改后重新申请</text>
		</view>
		<view class="icon-box" v-if="model.isLock==0">
			<text class="icon iconfont icon-check"></text>
			<text class="tit">已成为商户，请进入商户平台操作</text>
		</view>
		<view class="group-box" v-if="!model.id || model.isLock==2">
			<view class="form-uni-list">
				<uni-forms :value="model" :rules="rules" ref="form" :label-width="85" label-position="left">
					<uni-forms-item label="商户分类" name="categoryId" class="list-box">
						<uni-data-select v-model="model.categoryId" :localdata="categoryList" placeholder="请选择.."></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="店铺类型" name="storeId" class="list-box">
						<uni-data-select v-model="model.storeId" :localdata="storeList" placeholder="请选择.."></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="店铺名称" name="title" class="list-box">
						<uni-easyinput type="text" v-model="model.title" :maxlength="128" placeholder="请填写店铺名称" />
					</uni-forms-item>
					<uni-forms-item label="店铺地址" name="address" class="list-box">
						<uni-easyinput type="text" v-model="model.address" :maxlength="512" placeholder="请填写店铺地址" />
					</uni-forms-item>
					<uni-forms-item label="店铺LOGO" class="list-box">
						<view class="upload-box">
							<view @tap="chooseImage('avatar')" class="btn-box" v-if="!model.avatar">
								<text class="icon iconfont icon-add">上传图片</text>
							</view>
							<view class="img-box" v-if="model.avatar">
								<text @click="delImage('avatar')" class="close iconfont icon-close"></text>
								<image @click="viewImage('avatar')" mode="widthFix" :src="$api.loadFile(model.avatar)"></image>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="营业执照" class="list-box">
						<view class="upload-box">
							<view @tap="chooseImage('certUrl')" class="btn-box" v-if="!model.certUrl">
								<text class="icon iconfont icon-add">上传图片</text>
							</view>
							<view class="img-box" v-if="model.certUrl">
								<text @click="delImage('certUrl')" class="close iconfont icon-close"></text>
								<image @click="viewImage('certUrl')" mode="widthFix" :src="$api.loadFile(model.certUrl)"></image>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="店主姓名" name="realName" class="list-box">
						<uni-easyinput type="text" v-model="model.realName" :maxlength="30" placeholder="请填写联系人姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="mobile" class="list-box">
						<uni-easyinput type="text" v-model="model.mobile" :maxlength="128" placeholder="请填写联系手机号码" />
					</uni-forms-item>
					<uni-forms-item label="店铺简介" name="mobile" class="list-box">
						<uni-easyinput type="textarea" v-model="model.intro" :maxlength="512" placeholder="店铺一些介绍文字" />
					</uni-forms-item>
					
					<view class="form-foot">
						<button @click="submitForm" class="btn submit">确认提交</button>
					</view>
				</uni-forms>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: null, //商户分类
				storeList: null, //店铺类型
				model: {
					categoryId: null,
					storeId: null,
					title: null,
					address: null,
					mobile: null,
					avatar: null,
					realName: null,
					certUrl: null,
					intro: null
				},
				rules: {
					categoryId: {
						rules: [
							{ required: true, errorMessage: '请选择商户类别' }
						]
					},
					storeId: {
						rules: [
							{ required: true, errorMessage: '请选择店铺类型' }
						]
					},
					title: {
						rules: [
							{ required: true, errorMessage: '请填写店铺名称' }
						]
					},
					address: {
						rules: [
							{ required: true, errorMessage: '请填写店铺地址' }
						]
					},
					mobile: {
						rules: [
							{ required: true, errorMessage: '请填写联系人电话' }
						]
					},
					realName: {
						rules: [
							{ required: true, errorMessage: '请填写联系人名称' }
						]
					},
				},
				
			}
		},
		methods: {
			//初始化数据
			async initData(){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//获取商户分类
				await _this.$api.request({
					url: "/client/merchant/category/view/0",
				}).then((res) => {
					let categoryList = [];
					res.data.forEach(item=>{
						categoryList.push({
							text: item.title,
							value: item.id
						});
					})
					_this.categoryList = categoryList;
				});
				//获取店铺类型
				await _this.$api.request({
					url: "/client/merchant/store/view/0",
				}).then((res) => {
					let storeList = [];
					res.data.forEach(item=>{
						storeList.push({
							text: item.title,
							value: item.id
						});
					})
					_this.storeList = storeList;
				});
				//获取店铺信息
				await _this.$api.request({
					url: "/account/merchant",
				}).then((res) => {					
					_this.model = res.data;
				}).catch(err=>{});
				//关闭加载
				uni.hideLoading();
			},
			//提交表单
			submitForm() {
				let _this = this;
				_this.$refs.form.validate().then(async res=>{
					if(_this.model.id > 0) {
						await this.$api.request({
							url: `/account/merchant`,
							method: "put",
							data: _this.model,
							loading: true
						}).then(res=>{
							_this.$api.msg(`修改成功`,1500,false,'success');
							setTimeout(()=>{
								_this.initData();
							}, 1000);
							
						});
					} else {
						await this.$api.request({
							url: `/account/merchant`,
							method: "post",
							data: _this.model,
							loading: true
						}).then(res=>{
							_this.$api.msg(`提交成功`,1500,false,'success');
							setTimeout(()=>{
								_this.initData();
							}, 1000);
							
						});
					}
				}).catch(err =>{
					//console.log('表单错误信息：', err);
				});
			},
			//选择上传图片
			chooseImage(key) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: async (e) => {
						var tempFilePaths = e.tempFilePaths;
						await _this.$api.request({
							url: `/upload`,
							method: "file",
							data:{
								filePath: tempFilePaths[0]
							},
							loading: true
						}).then(res=>{
							const imgList = JSON.parse(res.data);
							_this.model[key] = imgList[0].filePath;
						});
					}
				});
			},
			//查看图片
			viewImage(key) {
				let src = this.$api.loadFile(this.model[key]);
				uni.previewImage({urls: src});
			},
			//删除图片
			delImage(key){
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "是否要删除图片？",
					success: (res) => {
						if (res.confirm) {
							_this.model[key] = null;
						}
					}
				})
			},
		},
		//页面初始化
		onLoad(options){
			this.initData();
		},
	}
</script>

<style lang="scss">
	.upload-box{
		margin: 0;
		padding: 0;
	}
	.icon-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 60rpx;
		border-radius: 24rpx;
		background: #fff;
		.icon{
			color: #67C23A;
			font-size: 120rpx;
		}
		.tit{
			margin-top: 48rpx;
			color: #666;
			font-size: 28rpx;
		}
	}
</style>